<template>
  <div class="page_main" v-loading="loading">
    <search v-model="query" @submit="getData">
      <el-form-item label>
        <el-button
          @click="handleAdd"
          size="small"
          type="primary"
          :disabled="!isAuth('system:roles:add')"
          >新增</el-button
        >
      </el-form-item>
    </search>
    <myTable :columns="columns" :data="list" border size="mini" stripe>
      <template #index="scope">
        <span>{{ scope.$index + 1 }}</span>
      </template>
      <template #status="scope">
        <el-switch
          :value="scope.row.status"
          :active-value="0"
          :inactive-value="1"
          @change="val => handleChangeStatus(val, scope.row)"
          :disabled="!isAuth('system:roles:update:status')"
        >
        </el-switch>
      </template>
      <template #btns="scope">
        <el-button
          @click="handleEdit(scope.row)"
          size="mini"
          type="primary"
          :disabled="!isAuth('system:roles:update')"
        >
          编辑
        </el-button>
        <el-button
                @click="handleAuth(scope.row)"
                size="mini"
                type="primary"
                :disabled="!isAuth('system:roles:update')"
        >
          授权
        </el-button>
      </template>
    </myTable>
    <pagination :page="page" :search="getData"></pagination>
    <formDialog
      :showBtn="false"
      @refresh="getData"
      ref="formDialog"
    ></formDialog>
    <editDialog
      :showBtn="false"
      @refresh="getData"
      ref="editDialog"
    ></editDialog>
  </div>
</template>

<script>
import { page } from "@/utils/options";
import { columns } from "./roles/option";
import formDialog from "./roles/formDialog.vue";
import editDialog from "./roles/editDialog.vue";
import search from "./roles/search.vue";

export default {
  components: { formDialog, search,editDialog },
  data() {
    return {
      loading: false,
      columns,
      list: [],
      page: {
        ...page
      },
      query: {}
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleAdd() {
      this.$refs.formDialog.open({
        form: {}
      });
    },
    handleReset() {
      this.query = {};
      this.getData();
    },
    handleEdit({ id }) {
      this.$refs.editDialog.open({
        edit: true,
        title: "编辑",
        form: {},
        params: { id }
      });
    },
    handleAuth({ id }) {
      this.$refs.editDialog.open({
        edit: false,
        title: "授权",
        form: {},
        params: { id }
      });
    },
    handleChangeStatus(val, { id }) {
      this.confirmBox({
        message: "是否确认执行此操作？",
        onConfirm: async () => {
          const [err] = await this.$Api.getApi("roles").status({
            data: {
              id,
              status: val
            }
          });
          return Promise.resolve(!err);
        }
      }).then(() => {
        this.handleSuccess("操作成功！");
        this.getData();
      });
    },
    handleDel({ id }) {
      this.confirmBox({
        message: "是否确认执行此操作？",
        onConfirm: async () => {
          const [err] = await this.$Api.getApi("roles").delete({
            data: {
              ids: [id]
            }
          });
          return Promise.resolve(!err);
        }
      }).then(() => {
        this.handleSuccess("操作成功！");
        this.getData();
      });
    },
    async getData() {
      this.loading = true;
      const [err, res] = await this.$Api.getApi("roles").list({
        data: {
          page: this.page,
          type: this.type,
          ...this.query
        }
      });
      this.loading = false;
      if (!err && res) {
        this.page.total = res.total || 0;
        this.list = res.records || [];
      }
    }
  },
  created() {
    this.getData();
  },
  mounted() {}
};
</script>
